<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 1.修饰符   lazy   默认会实时更新，加lazy会在失去焦点或回车时在更新-->
        <!-- <input type="text" v-model="message"> -->
        <input type="text" v-model.lazy="message">
      <h2>{{message}}</h2>

        <!-- 2.number -->
        <!-- v-model默认赋值都是string类型 -->
        <!-- <input type="number" v-model="age"> -->
        <input type="number" v-model.number="age">
        <h2>{{age}}--{{typeof(age)}}</h2> 

        <!-- 3修饰符：trim   去空格-->
        <!-- <input type="text" v-model='name'> -->
        <input type="text" v-model.trim='name'>
        <h2>您输入的名字：{{name}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好呀！',
                age:0,
                name:''
            }
        })


        // 注册组件的基本步骤
        // 1.创组件建构造器    调用vue.extend()方法
        // 2.注册组件     调用vue.Component()方法
        // 3.使用组件      在vue的实例的作用范围内使用组件
        // class Student extends Person{

        // }
    </script>
</body>
</html>